<template>
    <div class="main_content_wrap" style="background-color:#ffffff;">
        <div class="main_content_title">
            用户管理
        </div>
        <div>
            <div style="margin-bottom:10px;">
                <el-button @click="add()">新增用户</el-button>
            </div>
            <el-table size="small" :data="appList" style="width: 100%">
                <el-table-column prop="id" label="序号" width="60" align="center"></el-table-column>
                <el-table-column prop="username" label="用户名" align="center" ></el-table-column>
                <el-table-column prop="password" label="密码" align="center" ></el-table-column>
                <el-table-column prop="nickname" label="昵称" align="center" ></el-table-column>
                <el-table-column prop="destination" label="操作" align="center" width="130">
                    <template slot-scope="scope">
                        <el-button type="text" @click="flushMetrics(scope.row.num)">修改</el-button>
                        <el-button style="color:#C7000B" type="text" @click="deleteOption(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
            title="添加规则"
            :visible.sync="saveVisible"
            :close-on-click-modal="false"
            width="40%">
            <el-form size="small" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password"></el-input>
                </el-form-item>
                <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="ruleForm.nickname"></el-input>
                </el-form-item>
                <!-- <el-form-item label="注册回调地址" prop="registerCallbackUrl">
                    <el-input type="textarea" v-model="ruleForm.registerCallbackUrl"></el-input>
                </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="saveVisible = false;$refs.ruleForm.resetFields()">取 消</el-button>
                <el-button size="small" type="primary" @click="submitForm()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default{
    data(){
        return{
            appList:[],
            ruleForm:{
                username:'',
                password:'',
                nickname:''
            },
            saveVisible:false,
            rules: {
                username: [
                    { required: true, message: '必填项不能为空', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '必填项不能为空', trigger: 'blur' }
                ],
                nickname: [
                    { required: true, message: '必填项不能为空', trigger: 'blur' }
                ],
            }
        }
    },
    mounted(){
        this.loadData()
    },
    methods:{
        loadData(){
            this.$http.get('/api/user/list').then(({
                data: res
            }) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg)
                }
                console.log(res.data)
                this.appList = res.data;
            }).catch(() => {})
        },
        add(){
            this.saveVisible = true;
        },
        submitForm(){
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.$http.post('/api/user/add', this.ruleForm).then(({
                        data: res
                    }) => {
                        if (res.code !== 0) {
                            return this.$message.error(res.msg)
                        }
                        this.loadData()
                        this.saveVisible = false;
                        this.$refs.ruleForm.resetFields();
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                    }).catch(() => {})
                } else {
                    return false;
                }
            });
        },
        deleteOption(id){
            this.$http.get('/api/user/delete?id='+id, this.ruleForm).then(({
                data: res
            }) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg)
                }
                this.loadData()
                this.$message({
                    type: 'success',
                    message: '操作成功!'
                });
            }).catch(() => {})
        }
    }
}
</script>
<style scoped>

</style>